<script setup lang="ts">
import { Button, Image, Popconfirm, Tag } from '@arco-design/web-vue'
import { get, post, message } from '@/utils'
import { ProductStatus, ProductClient } from '@/enum/product'
import { Market } from '@/enum/market'
import LimitTimeDiscountModal from './LimitTimeDiscountModal.vue'
import LimitTimeSecKillModal from './LimitTimeSecKillModal.vue'
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
const props = defineProps<{
  type: Market
  publicityId: any
}>()
const route = useRoute()
const { store } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({
  type: props.type,
  publicityId: props.publicityId,
  sellerId: '',
})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    get(
      {
        url: '/server-shop/sys-seller/publicity/goods/page',
        data: { size: params.pageSize, ...params },
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}

const remove = id => {
  post({ url: '/server-shop/sys-seller/publicity/goods/remove?ids=' + id }, ({ code, msg }) => {
    if (code == 200) actionRef.value.reload()

    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
  })
}
const getStock = item => {
  const list = JSON.parse(item.config)?.detailList || []
  console.log(list)
  let result = 0
  list.forEach(_ => {
    result += _.stock
  })
  return result
}
const columns = formatColumns([
  { title: '商品图片', dataIndex: 'goodsImg', width: 90, valueType: 'image' },
  {
    title: '商品名称',
    dataIndex: 'goodsName',
    width: 90,
    hideInSearch: false,
  },
  {
    title: '商品状态',
    dataIndex: 'goodsStatus',
    width: 90,
    hideInSearch: false,
    valueEnum: {
      [ProductStatus.下架中]: { text: '下架中', status: 'Warning' },
      [ProductStatus.上架中]: { text: '上架中', status: 'Success' },
      [ProductStatus.审核不通过]: { text: '审核不通过', status: 'Error' },
      [ProductStatus.待审核]: { text: '待审核', status: 'Processing' },
      [ProductStatus.平台下架]: { text: '平台下架', status: 'Warning' },
    },
  },
  {
    title: '商品价',
    dataIndex: 'goodsPrice',
    width: 100,
    sorter: true,
    valueType: 'money',
  },
  { title: '销量', dataIndex: 'goodsSalesVolume', width: 90, sorter: true },
  { title: '库存', dataIndex: 'goodsStock', width: 90, sorter: true },
  {
    title: '活动库存',
    dataIndex: 'stock',
    sorter: true,
    width: 90,
    hideInTable: props.type != Market.限时折扣,
  },
  { title: '创建时间', dataIndex: 'createTime', width: 200 },
  {
    title: '操作',
    dataIndex: 'op',
    width: 150,
    fixed: 'right',
    btnList: [
      {
        name: '编辑',
        hidden: ({ record }) => ![Market.限时折扣 + '', Market.限时秒杀 + ''].includes(route.query.type as string),
        handle: ({ record }) => store.handleShow(record),
      },
      {
        name: '删除',
        type: 'popconfirm',
        tip: '确认删除该商品吗?',
        handle: ({ record }) => remove(record.id),
      },
    ],
  },
])
</script>

<template>
  <div class="page">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" :scroll="{ x: 1000 }" column-resizable :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
        <a-button
          type="primary"
          @click="
            $router.push({
              name: 'marketDistributesProductList',
              query: {
                publicityId: searchQuery.publicityId,
                type: props.type,
              },
            })
          "
        >
          <template #icon>
            <icon-plus />
          </template>
          添加活动商品
        </a-button>
      </template>

      <template #stock="{ record }">
        {{ getStock(record) }}
      </template>
    </ProTable>
    <template v-if="$route.query.type == Market.限时折扣">
      <LimitTimeDiscountModal v-if="store.show" v-model:show="store.show" :id="store.id" :goodsId="store.info.goodsId" :publicId="route.query.publicityId" />
    </template>
    <template v-else-if="route.query.type == Market.限时秒杀">
      <LimitTimeSecKillModal v-if="store.show" v-model:show="store.show" :id="store.id" :goodsId="store.info.goodsId" :publicId="route.query.publicityId" />
    </template>
  </div>
</template>
